<template>
  <div class="order-item">
    <div class="order-item-item" v-for="item in list" :key="item.orderID">
      <div class="order-item-type">
        <span class="order-item-time">{{item.orderTime | orderTimeFilter}}</span>
        {{itemType(item.type)}}
      </div>
      <!-- 二次遍历 -->
      <van-card
        v-for="good in item.goods"
        :key="good.cartid"
        style="margin-top: 0px;"
        :num="good.selectedNum"
        :price="good.goods_info.price | decimalPoint"
        :desc="good.s1 + ' | ' + good.s2"
        :thumb="good.goods_info.picture"
        @click-thumb="goDetails(good.goodsId)"
      >
        <template #title>
          <div class="van-ellipsis order-item-goodtitle">{{good.goods_info.title}}</div>
        </template>
      </van-card>
      <!-- 二次遍历end -->
      <div class="operation">
        <!-- 都有删除 -->
        <van-button
          @click="delOrder(item.orderID)"
          class="ml"
          round
          size="small"
          type="default"
        >删除订单</van-button>
        <!-- 已收货 -->
        <van-button
          @click="showEvaluateFunc(item.orderID)"
          v-if="item.type===2"
          class="ml"
          round
          size="small"
          type="default"
        >去评价</van-button>
        <!-- 待收货 -->
        <van-button
          @click="confirmOrder(item.orderID)"
          v-if="item.type===1"
          class="ml"
          round
          size="small"
          type="default"
        >确认收货</van-button>
        <!-- 除了交易关闭都可以查看 -->
        <van-button @click="viewDetails(item)" class="ml" round size="small" type="default">查看详情</van-button>
      </div>
    </div>

    <!-- 评价弹出框 -->
    <van-dialog
      @confirm="addEvaluate"
      get-container="#app"
      v-model="showEvaluate"
      title="商品评价"
      show-cancel-button
    >
      <van-field
        v-model="message"
        rows="2"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="请输入评价"
        show-word-limit
      />
    </van-dialog>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import { post } from "@/utils/axios";
import Vue from "vue";
import { Button, Card, Popup, Dialog, Field } from "vant";

Vue.use(Button)
  .use(Card)
  .use(Popup)
  .use(Dialog)
  .use(Field);
export default {
  data() {
    return {
      showEvaluate: false,
      message: "",
      evaluateOrderID: ""
    };
  },
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  computed: {
    itemType: () => val => {
      switch (val) {
        case 0:
          return "交易关闭";
          break;
        case 1:
          return "待收货";
          break;
        case 2:
          return "待评价";
          break;
        case 3:
          return "已评价";
          break;
        default:
          return "xxx";
          break;
      }
    }
  },
  // filters: {

  // },
  methods: {
    ...mapMutations("userModule", ["CHANGEORDERACTION"]),
    /**
     * 跳转商品详情
     */
    goDetails(id) {
      this.$router.push({
        name: "Classify-details-tradeItemId",
        params: { tradeItemId: id }
      });
    },
    /**
     * 查看详情,给父组件详情参数
     */
    viewDetails(item) {
      this.$emit("view-details", item);
    },
    /**
     * 删除订单
     */
    delOrder(orderID) {
      let $that$ = this;
      post({
        url: "/hybrid/uni/del-orders",
        data: {
          orderID
        }
      }).then(res => {
        if (res.status >= 0) {
          // $that$.$emit('modify-order', res.result)
          // console.log(res.result);
          $that$.CHANGEORDERACTION(res.result);
        }
      });
    },
    /**
     * 弹出评价
     */
    showEvaluateFunc(orderID) {
      this.showEvaluate = true;
      this.evaluateOrderID = orderID;
    },
    /**
     * 确认评价
     */
    addEvaluate() {
      let $that$ = this;
      post({
        url: "hybrid/uni/add-orders-evaluate",
        data: {
          orderID: $that$.evaluateOrderID,
          evaluate: $that$.message,
          type: 3
        }
      }).then(res => {
        if (res.status >= 0) {
          $that$.message = "";
          // $that$.$emit('modify-order', res.result)
          // console.log(res.result)
          $that$.CHANGEORDERACTION(res.result);
        }
      });
    },
    /**
     * 确认收货
     */
    confirmOrder(orderID) {
      let $that$ = this;
      post({
        url: "hybrid/uni/modify-orders-type",
        data: {
          orderID,
          type: 2
        }
      }).then(res => {
        if (res.status >= 0) {
          // $that$.$emit('modify-order', res.result)
          // console.log(res.result);
          $that$.CHANGEORDERACTION(res.result);
        }
      });
    }
  }
  // mounted() {
  //   console.log(this.list)
  // }
};
</script>

<style lang="scss">
.order-item {
  text-align: left;
  .order-item-item {
    background-color: #fafafa;
    margin-top: 10px;
    .order-item-type {
      text-align: right;
      margin-right: 20px;
      color: #fa482f;
      font-size: 13px;
      padding-top: 8px;
      .order-item-time {
        float: left;
        margin-left: 20px;
        color: #000;
      }
    }
    .order-item-goodtitle {
      margin-top: 10px;
      width: 75%;
      font-weight: 500;
    }
    .operation {
      text-align: right;
      padding-bottom: 8px;
      margin-right: 20px;
      .ml {
        margin-left: 8px;
      }
    }
  }
}
</style>